<template>
    <div class="card-full">
      <div class="search-box">
           <el-form :inline="true" :model="filterOption">
             <el-form-item label="">
               <el-input v-model="filterOption.keyword" placeholder="请输入充电桩名称或地址" clearable style="width: 240px;"></el-input>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" @click="getList">查询</el-button>
               <el-button @click="reset">重置</el-button>
             </el-form-item>
           </el-form>
         </div>
     <div class="table-box">
       <el-table :data="tableData" row-key="id" border header-align="center" style="height: 100%;">
         <el-table-column prop="name" label="名称" width="240" />
         <el-table-column prop="opening_hours" label="营业时间" width="120" />
         <el-table-column prop="address" label="地址" width="240" />
         <el-table-column prop="total_piles" label="充电桩数量" width="120" />
         <el-table-column prop="tag" label="标签" width="240">
           <template #default="scope">
             <div v-if="scope.row.tag">
               <el-tag class="tag-item" type="success" v-for="(item, key) in scope.row.tag" :key="key">{{ item }}</el-tag>
             </div>
           </template>
         </el-table-column>
         <el-table-column prop="status" label="状态" width="120">
           <template #default="scope">
             <el-tag type="success" v-if="scope.row.status === 1">正常</el-tag>
             <el-tag type="success" v-if="scope.row.status === 2">禁用</el-tag>
             <el-tag type="success" v-if="scope.row.status === 3">维护</el-tag>
           </template>
         </el-table-column>
         <el-table-column fixed="right" label="充电桩">
           <template #default="scope">
             <el-button v-permission="'menu:update'" link type="primary" size="small" @click="navToList(scope.row)">列表</el-button>
           </template>
         </el-table-column>
   
         <el-table-column fixed="right" label="操作" min-width="160" align="center">
           <template #default="scope">
             <el-button v-permission="'menu:update'" link type="primary" size="small" @click="handleClick(scope.row)"
               >编辑</el-button
             >
             <!-- <el-button v-permission="'menu:add'" link type="primary" size="small" @click="handleClick(scope.row, true)"
               >新增</el-button
             > -->
           </template>
         </el-table-column>
       </el-table>
     </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { stationsList } from "@/api/modules/stations";
import { useRouter } from "vue-router";
const tableData = ref([]);
const router = useRouter();

interface UserFilterOption {
  keyword?: string;
}

const filterOption = ref<UserFilterOption>({});
const getList = () => {
  stationsList({
    page: 1,
    page_size: 20
  }).then(res => {
    tableData.value = res.data.list;
    console.log(res);
  });
};

onMounted(() => {
  getList();
});
// 跳转到充电桩列表
const navToList = (row: any) => {
  console.log(row);
  router.push({
    path: "/stations/piles",
    query: { id: 123 }
  });
};
const handleClick = (row: any, isAdd: boolean = false) => {};
const reset = () => {
  filterOption.value = {};
  getList();
};
</script>

<style scoped lang="scss">
.tag-item {
  margin-right: 10px;
}
</style>
